<template>
  <!-- 左侧导航栏 -->
  <el-tree
    ref="treeRef"
    class="base_tree"
    :data="props.treeData"
    :props="defaultProps"
    :default-expand-all="true"
    node-key="id"
    :default-checked-keys="defaultCheckedKeys"
    @node-click="chooseGroup"
  >
  </el-tree>
</template>

<script setup lang="ts">
import { ref, watch, reactive, computed, onMounted } from "vue";
import { ElTree } from "element-plus";
const treeRef = ref<InstanceType<typeof ElTree>>();
const emit = defineEmits(["submit"]);
const props = defineProps(["treeData"]);
const defaultCheckedKeys = ref<Array<number>>([662])
interface Tree {
  id: number;
  name: string;
  children?: Tree[];
}
// 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用 8-朋友圈素材
const defaultProps = {
  checkStrictly: true,
  emitPath: false,
  children: 'children',
  label: "name",
  value: "id"
};

const chooseGroup = (value: any) => {
  treeRef.value!.setCheckedKeys([value], false)
  emit("submit", value.id);
};

watch(()=>props.treeData, (val)=>{
  let id: number = 0
  if(val?.length){
    if(val[0]?.children?.length){
      id = val[0].children[0].id
    }else{
      id = val[0].id
    }
  }
  treeRef.value!.setCheckedKeys([id], false)
})


</script>

<style lang="scss" scoped>
.base_tree {
  margin-top: 10px;
  :deep .el-tree-node__expand-icon {
    color: #ff6b00;
  }
  :deep .el-tree-node{
    &.is-checked{
      .el-tree-node__content{
        background: #FFF1E8;
      }
    }
    &.is-current{
      .el-tree-node__content{
        background: #FFF1E8;
      }
    }
    .el-tree-node__content {
     &.is-focusable{
       background: #fffaf9;
     }
     &:hover{
       background: #fffaf9;
     }
   }

  }
  :deep .el-tree {
    --el-tree-node-hover-bg-color: #fffaf9;
    
  }
}
</style>
